/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-05-18 10:37:50
 * @LastEditors: cuidm
 * @LastEditTime: 2022-10-25 17:38:26
 */
export const G6ToolBar = function (G6, setShowHelp) {
  return new G6.ToolBar({
    getContent () {
      /* 这里必须是 ul li */
      return `
        <ul class="g6-component-toolbar">
          <li class="t-iconfont icon-zoom-in" code="zoomIn" title="放大"></li>
          <li class="t-iconfont icon-zoom-out" code="zoomOut" title="缩小"></li>
          <li class="t-iconfont icon-1x" code="defaultSize" title="1倍大小"></li>
          <li class="t-iconfont icon-reset" code="relocation" title="重定位"></li>
          <li class="iconfont icon-kafka" code="force" title="力导向布局"></li>
          <li class="iconfont icon-tuoputu rotate-270" code="dagreLR" title="层次布局"></li>
          ${setShowHelp ? `<li class="t-iconfont icon-why" code="graphHelp" title="帮助"></li>`: ``}
      </ul>
    `;
    },
    handleClick (code, graph) {
      if(typeof toolBarHandles(graph)[code] == "function") {
        toolBarHandles(graph, setShowHelp)[code]();
      }
    },
  });
};

const toolBarHandles = (graph, setShowHelp)=> {
  return {
    defaultSize () {
      graph.zoomTo(1);
      graph.fitCenter();
    },
    // 缩小
    zoomOut () {
      graph.zoom(0.9);
    },
    // 放大
    zoomIn () {
      graph.zoom(1.1);
    },
    relocation() {
      graph.fitCenter();
    },
    graphHelp () {
      setShowHelp(true);
    },
    force () {
      graph.updateLayout({
        type: 'force',
        preventOverlap: true,
        nodeSpacing: 50,
        linkDistance: (d) => {
          // if (d.source.isRoot || d.target.isRoot) {
          //   return 220;
          // }
          return 150;
        },
        nodeStrength: (d) => {
          if (d.isLeaf) {
            return -50;
          }
          return -10;
        },
      });
      graph.render();
      graph.fitCenter();
    },
    dagreLR () {
      graph.updateLayout({
        type: 'dagre',
        align: 'UL',
        rankdir: 'LR',
        nodesepFunc: () => 40,
        ranksepFunc: () =>80,
      });
      graph.render();
      graph.fitCenter();
    },
  };
} 

export const G6Menu = function (G6,handles = {}, isEdit = false) {
  return new G6.Menu({
    offsetX: 20,
    offsetY: -10,
    className: "g6-component-contextmenu-reset",
    shouldBegin (e) {
      return true;
    },
    getContent (e) {
      // 节点
      let menus = '<div class="box edit">';
      // 右键菜单命令
      const commands = [];
       
      const model = e.item?.getModel();
      if(model && isEdit) {
        if(model.isRoot) {
          commands.push({
            command: 'addNode',
            name:    '添加关联',
          })
        } else {
          commands.push({
            command: 'deleteNode',
            name:    '删除模型',
          })
        }
      }
      commands.push({
        command: 'queryDetail',
        name:    '查看详情',
      })
      commands.forEach(item => {
        menus += `<p class="menu-item" command="${item.command}">${item.name}</p>`;
      });
      menus += `</div>`;
      return menus;
    },
    handleMenuClick (target, item) {
      const command = target.getAttribute('command');
      if(typeof handles[command] == "function")
          handles[command](item);
    },
  });
};

export const G6Legend = function (G6, data, filterFunctions) {
  return new G6.Legend({
    data,
    align: 'center',
    layout: 'vertical',
    position: 'top-left',
    vertiSep: 12,
    horiSep: 20,
    offsetY: 0,
    padding: [4, 16, 8, 16],
    containerStyle: {
        fill: 'transparent',
        lineWidth: 0
    },
    titleConfig: {
        position: 'left',
        offsetX: 0,
        offsetY: 12,
    },
    filter: {
        enable: true,
        multiple: true,
        trigger: 'click',
        graphActiveState: 'activeByLegend',
        graphInactiveState: 'inactiveByLegend',
        filterFunctions
    }
    });
}
